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Tổng quan về AJAX 

Vào những năm 90, trên thế giới, khi mà công nghệ “Web động” cho phép 
các lập trình viên nhanh chóng phát triển các ứng dụng trên nền Web với 
khả năng tương tác 2 chiều với người sử dụng, nhiều người đã có thể hy 
vọng rằng đến một lúc nào đó tất cả các ứng dụng mà chúng ta sử dụng 
sẽ là các Ứng dụng Web thay vì các phần mềm chạy độc lập trên các máy 
tính đơn lẻ (ứng dụng desktop). Quả thật, với sự phát triển chóng mặt 
của mạng Internet cùng với những ưu điểm của các Ứng dụng Web (truy 
cập tại mọi nơi, không cần nâng cấp nhiều về phía máy sử dụng,...), 
tương lai của các phần mềm chắc chắn sẽ gắn chặt với các ứng dụng 
Web, nếu không muốn nói là có thể sẽ bị thay thế. Tuy nhiên, cho đến 
giờ, hy vọng đó vẫn chưa được đáp ứng một cách triệt để bởi một số 
điểm đặc trưng của ứng dụng Web lại chính là những giới hạn tưởng 
chừng như không thể vượt qua nổi. Đó chính là cách thức mà người dùng 
và Ứng dụng Web tương tác với nhau. 


Tổng quan về AJAX 


Khác với các phần mềm chạy độc lập ở máy khách (có khả năng tương 
tác gần như tức thời với người dùng), các Ứng dụng Web bị giới hạn bởi 
chính nguyên lý hoạt động của nó: tất cả các giao dịch phải thực hiện 
thông qua phƯơng thức giao dịch HTTP (HyperText Transport Protocol - 
Giao thức truyền tải qua các siêu liên kết) trong một mô hình có tên 
Client/Server. Bất kỳ một tác động nào của người dùng lên ứng dụng 
Web thông qua trình duyệt đều cần thời gian gửi về Server và sau khi xử 
lý, Server sẽ trả về những thông tin người dùng mong đợi. Như vậy, độ 
trễ trong trường hợp này chính là điều mà các ứng dụng Web khó có thể 
sánh với như các phần mềm chạy trên máy tính đơn lẻ (đặc biệt là trong 
các ứng dụng như Bản đồ trực tuyến, soạn thảo văn bản trực tuyến, sát 
hạch trực tuyến có tính thời gian làm bài...). 


Thuật ngữ AJAX được xuất hiện vào ngày 18/2/2005 trong một bài báo 
có tên AJAX : A New Approach to Web Applications [1] của tác giả Jesse 
James Garrett, công ty AdapativePath. Ông định nghĩa và tóm gọn lại từ 
cụm từ “Asynchronous JavaScript+CSS+DOM+XMLHttpRequest”. Ngay 


sau đó thuật ngữ AJAX được phổ biến cực kỳ nhanh chóng trong cộng 
đồng phát triển Web và cho đến nay nó là mỘt trong những từ khóa được 
tìm kiếm nhiều nhất trên Internet. 


Nội dung định nghĩa của Garrett về AJAX trong bài báo của mình như 
sau: 


AJAX không phải là một công nghệ. Nó là tập hợp của nhiều công nghệ 
với thế mạnh của riêng mình để tạo thành một sức mạnh mới. AJAX bao 
gồm: 


‹ Thể hiện Web theo tiêu chuẩn XHTML và CSS; 

e Nâng cao tính năng động và tương tác bằng DOM (Document Object 
Model); 

© Trao đổi và xử lý dữ liệu bằng XML và XSLT; 

‹© Truy cập dữ liệu theo kiểu bất đồng bộ (asynchronous) bằng 
XMLHttpRequest; 

«Và tất cả các kỹ thuật trên được liên kết lại với nhau bằng 
JavaScript.[ 1] 


Trong các thành phần cấu thành trên, điểm mấu chốt của AJAX nằm ở 
XMLHttpRedquest. Đây là một kỹ thuật do Microsoft khởi xướng và tích 
hợp lần đầu tiên vào IE5 dưới dạng một ActiveX. Mozilla tích hợp công 
nghệ này vào Mozilla 1.0/Netscape 6 sau đó (đương nhiên toàn bộ các 
version sau này của Firefox đều có XMLHttpRequest) và hiện nay đã có 
trong trình duyệt Safari 1.2 (Apple) và Opera 7 trở lên. Các vấn đề về 
XMLHttpRedquest và cách sử dụng nó trên các trình duyệt khác nhau sẽ 
được chúng ta quay trở lại ở các phần tiếp theo. Sau đây là một sỐ nét 
khác biệt cơ bản giữa các ứng dụng Web truyền thống và Ứng dụng Web 
sử dụng AJAX. 


Trong các Ứng dụng Web truyền thống, khi người dùng có một cần thay 
đổi dữ liệu trên trang Web, yêu cầu thay đổi được gửi về server dưới 
dạng HTTP request (hay còn gọi postback), server sẽ xử lý yêu cầu này và 
gửi trả lại trang HTML khác thay thế trang cũ. Qui trình này được mô tả 
là nhấp-chờ và tải lại (click-wait-and-refresh): ví dụ người dùng sau khi 
nhấn một nút “Submit” trên trang Web phải chờ cho đến khi server xử lý 


xong mới có thể tiếp tục công việc. Ngược lại, trong các Ứng dụng 
AJAX, người dùng có thể nhấn chuột, gõ phím liên tục mà không cần 
chờ đợi. Nội dung tương ứng với từng hành động của người dùng sẽ gần 
như ngay lập tức được hiển thị vào vị trí cần thiết (đáp ứng gần như tức 
thời) trong khi trang Web không cần phải refresh lại toàn bộ nội dụng. 
Để tìm hiểu kỹ hơn điều này, ta sẽ xem xét 2 mô hình ứng dụng như [1] 
đã đề cập, Mô hình cổ điển và Mô hình AJAX-based: 


Mô hình cổ điển của một ứng dụng Web (hình minh họa được lấy từ bài 
báo của Garrett) 


full page refresh 
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Mô hình ứng dụng Web sử dụng AJAX (theo bài báo của Garrett) 


partial UI updates 
client 


browserUI 


asynchronous data transfer data transfer 


Mỹ Server = Di 


Rõ ràng điểm khác biệt là thay vì phải tải cả trang Web thì với AJAX 
trình duyệt phía người dùng chỉ cần tải về phần của trang Web mà người 
dùng muốn thay đổi. Điều này giúp cho ứng dụng Web phản hồi nhanh 
hơn, thông minh hơn. Ngoài ra, điểm đặc biệt quan trọng trong công nghệ 
AJAX nằm ở chữ A (Asynchronous) — không đồng bộ - tức là người 
dùng cứ gửi yêu cầu của mình tới server và quay lại với công việc của 
mình mà không cần chờ trả lời. Khi nào server xử lý xong yêu cầu của 
phía người dùng, nó sẽ báo hiệu và người dùng có thể “thu nhận lấy” để 
thể hiện những thay đổi cần thiết. Vậy tất cả cơ chế này hoạt động thực 
sự thế nào? AJAX cho phép tạo ra một AJAX Engine nằm giữa giao tiếp 
này. Khi đó, các yêu cầu gửi (resquest) và nhận (response) do AJAX 
Engine thực hiện. Thay vì trả dữ liệu dưới dạng HTML và CSS trực tiếp 
cho trình duyệt, Web server có thể gửi trả dữ liệu dạng XML và AJAX 
Engine sẽ tiếp nhận, phân tách và chuyển hóa thành XHTML + CSS cho 
trình duyệt hiển thị. Việc này được thực hiện trên client nên giảm tải rất 
nhiều cho server, đồng thời người sử dụng cảm thấy kết quả xử lý được 
hiển thị tức thì mà không cần nạp lại trang. Mặt khác, sự kết hợp của các 
công nghệ Web như CSS và XHTML làm cho việc trình bày giao diện 
trang Web tốt hơn nhiều và giảm đáng kể dung lượng trang phải nạp. 
Đây là những lợi ích hết sức thiết thực mà AJAX đem lại. Chúng ta sẽ 
xem xét cụ thể các thành phần cấu thành AJAX, nguyên lý hoạt động và 
việc sử dụng Javascript kết nối chúng trong phần tiếp theo. 


Ứng dụng AJAX xây dựng module TỪ điển trực tuyến 

Sau khi nắm được nguyên lý của AJAX, bạn đọc có thể sử dụng một 
công cụ lập trình web bất kỳ để xây dựng các ứng dụng tiện ích như tra 
cứu từ điển (giống google suggest), tự động sao lưu văn bản đang soạn 
(auto save), tự động sao lưu các giá trị form đang nhập... 


Mô tả Ứng dụng 


Dưới đây là màn hình module phần mềm từ điển trực tuyến sử dụng 
công nghệ AJAX Lien ket 
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Từ điền thuật ngữ Tin học 


Tính năng: 

1. Tự động gợi ý các từ có trong từ điễn 
tương ứng với chữ cái gỗ vào 

2. Hiễn thị nhanh chóng nghĩa của từ trong ö 
mà không cần reload lại cả trang 


Mời bạn nhập thuật ngữ tin học cần tra cứu 
trang ô dưới đây: 


Irl Ok | 
PHP 
Pilferina 
Ping 
PKC x{ 


vidu 


Người dùng gõ vào một từ cần tra cứu bất kỳ, sau mỗi ký tự được nhập 
vào ô tra cứu, danh sách các tỪ trong CSDL từ điển có các ký tự tương 
ứng ngay lập tức hiện ra trong một danh sách đổ xuống, giúp người dùng 
dễ dàng nhập liệu và lựa chọn (giống cách làm việc của Google Suggest) 


Sau khi có từ cần tra cứu, người dùng nhấn ok, nghĩa của từ đó ngay lập 
tức hiện ra phía dưới (không cần reload lại trang) 


[philosophy Ok| 


philosophy: 
(danh từ) Triết học, triết lý 

(Idoms}) atural nhilasaphy: Khaa hạc tự 
nhiên 


hinh minh hoa 2 


Phía người dùng chỉ biết đến 1 trang duy nhất là index.html. Hậu trường 
của ứng dụng là cơ chế Ajax được thực hiện trong các file javascript 
included và các file asp hỗ trợ truy xuất CSDL qua các tham số gửi theo 
đường XMLHTTPRedquest tỪ file ajax.js và ajax_search.js. 


Mã nguỒn minh họa 


Đoạn code minh họa đơn giản dưới đây (viết trên ASP và CSDL Access) 
sẽ giúp bạn hiểu rõ hơn cơ chế này. 


Tệp index.html 


<!1DOC TY PE html PUBLIC "-/W3C//DTD XHTML, 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtm]1-transitional.dtd”> 


<html lang="en-US"> 


<head> 


<style type=”text/css” media=”screen”> 
body { 

font: 11px arial;} 
.suøøest_link { 
background-color: #FEFFEFFEE; 
padding: 2px 6px 2px GpX;} 
.suøøest_link_over { 
background-color: #3366CGC; 
padding: 2px 6px 2px 6px;} 
#search_sugøest { 

position: absolute; 
background-color: #FEFEFFEE; 
text-align: left; 

border: 1px solid #000000; } 
label { 

width:4em; 

folat:left 

text-allign:right; 
margin-right:0.5em; 


display:block; } 


.submit Input{ 
margin-left:4.5em; } 

fieldset{ 

boder:1px solid #781351; 
width:20em;} 

Legend { 

color:#fff; 
background:#ffa20c; 
border:1px solid #781351; 
padding:2px 6px} 

</style> 

<script language=”JavaScript” type="”text/JavascrIpt” 
Src=”ajax_ search.js”></script> 


<script language=”JavaScript” type="”text/JavascrIpt” src="ajaX.]s”> 
</script> 


<meta http-equiv=”Content-Type” content="text/html; charset=utf-8”> 
</head> 

<body> 

<fieldset><legend>Từ điển thuật ngữ Tin học</legend> 


<p>Tính năng: <br>&nbsp;1. Tự động gợi ý các tỪ có trong từ điển tương 
ứng với chỮ cái gõ vào<br>&nbsp;2. Hiển thị nhanh chóng nghĩa của từ 


trong ô mà không cần reload lại cả trang </p> 


<p>Mời bạn nhập thuật ngữ tin học cần tra cứu trong ô dưới đây: 
<br>&nbsp;</p> 


</fieldset> 
<fomm name=frmSearch id="frmSearch” method=get> 


<input type=”text" id="formWord” name="formWord” alt="Search 
Criteria” onkeyup=”searchSugsesft();” autocomplete=”off” /> 


<input type=”button” value="OK" 


onclick=”sndUserCheck(document.frmSearch.formWord.value);"> </qd> 
<brP 


<div id="search_ sugøgest"></dIv> 
</form> 

<p></p> 

<fieldset style="width: 220; height: 39”> 
<legend>Nghĩa từ</legend> 

<dïv id=”TakenOrNot"></div> 
</fieldset> 

</body> 


</html> 


Tệp ajax.js 


functfion createRequestObject() 

{ 

Vaf TO; 

var browser = navigator.appName; 

If(browser == "Microsoft Internet Explorer”) { 

// on IE, we have to use AcfiveX 

ro = new ActiveXObject( "Microsoft. XMLHTTP"); 
} else { 


// on every other browser, we can directly create a new XMLHttpRequest 
object 


ro = new XMLHttpRedquesft(); 

} 

refurn r0; 

} 

var http = createRequestObject(); 

// this function should be called for user input 

// the response in this case is formatted as follows: 

/⁄/ object|text 

// where object ¡s the id of the HTML element we are øgoing to update 
/⁄/ and text is what it will be updated to 


// this could obviously work a lot better with some XML, 


funcftion handleResponse() 

{ 

If(http.readyState == 4) { 

Var response = http.responseText; 
var update = new Array(); 
If(response.indexOf('!= -1)) { 
update = response.split("|”); 
document.øetElementById(update[0]).innerHTML = update|{ 1 |; 
} 

} 

} 


// this function should be called for user input 
// Ìt opens up the usercheck.asp page with a querystring of 'action' 


funcfion sndUserCheck(action) 


{ 
http.open(”“get”, "searchMeaning.asp?formWord=” + action); 
http.onreadystatechange = handleResponse; 


http.send(null); 
} 


Tp ajax_search.js 

//Gets the browser specific XmlHttpRequest Object 
function getXmlHttpRequestObject() { 

If (window.XMLHttpRedquest) { 

return new XMLHttpRedquest(); 

} else if(window.ActiveXObject) { 

return new ActiveXObject("Microsoft.XMLHTTP"); 
} else { 


alert("Your Browser Sucks!\nIts about fommWorde to upgrade don't you 
think?"); 


} 

} 

//Our XmlHttpRedquest object to get the auto sugøest 

var searchReq = getXm]HttpRequestObject(); 

//Called from keyup on the search textbox. 

//Starts the AJAX redquest. 

function searchSuggest() { 

1 (searchRedq.readyState == 4 || searchReq.readyState == 0) { 

Var str = escape(document.getElementById(fommWord').value); 
searchRedq.open(”GE'F”, 'searchSugøest.asp?formWord=' + str, true); 


searchRedq.onreadystatechange = handleSearchSugøest; 


searchRedq.send(null); 

} 

} 

//Called when the AJAX response ïs returned. 
function handleSearchSuggest(Q { 

1 (searchRedq.readyState == 4) { 

Vvar ss = document.øgetElementBylId(search_ suggøesft') 
ss.InnerHTML = ”; 

Var str = searchRedq.response Text.split("<br>"); 
for(i=0; ¡ < str.length - 1; i++) { 

//Buiïld our element string. This ¡1s cleaner using the DOM, but 
//TE. doesn't support dynamically added attributes. 


TT T1, 


Var sugøøest = '<div onmouseover="]avascript:suøøestOver(this);" '; 


TT T1, 


SuØøest += 'onmouseout="javascript:suøøestOut(this);" '; 
suøøest += 'onclick=”javascript:setSearch(this.innerHTML);" '; 
suøøest += 'class=”suggest_link">' + str[i] + '</div>'; 
ss.InnerHTML += suggest; 

} 


} 


//Mouse over function 

function sugøestOver(div_ value) { 

div_ value.className = 'suggest_link_over; 

} 

//Mouse out function 

function sugøestOut(div_ value) { 

div_ value.classNÑame = 'suggest_ link; 

} 

//Click function 

funcfion setSearch(value) { 
document.getElementById(formWord').value = value; 
document.øgetElementByld(search_ suggest').InnerHTML = "; 


} 


Tp search_sugøøest.asp 

<%(@LANGUAGE="VBSCRIPT”" CODEPAGE=”65001”"%> 

<head> 

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> 
<title>Module tu dien</title> 


</head> 


<% 

/Wniten by Minhdn 

//Lay bien search bang request, sau do search trong CSDL, 
/mhung dong nao co title like bien search thi lay ra 

%> 

<†1--#include file=”connection.asp”--> 

<%///Make sure that a value was sent. 
fommWord=redquest("formWord") 

//Get every page title for the site. 

If len(formWord)>=1 then 


str = "SELECT * EROM dictionary WHERE word like '""&formWord&"%' 
ORDER BY word” 


rs.0Den sfr,conn 

do unti] rs.eof%> 
<%=rs("word”)%><br> 
<%rs.movenext 

loop 

rs.close 

set rs=nothing 

end ïif 


%> 


Tệp Search_mearning.asp 
<%(@LANGUAGE="VBSCRIPT”" CODEPAGE=”65001”"%> 
dim strComn, dbComn, RS 

set dbconn= server.createObject(“ADODB.connecftion”) 


dbComn.Open "PROVIDERE=MSDASQL;DRIVER={Microsoft Access 
Driver (*.mdb)};DBQ=” & Server.Mappath(”dictionary.mdb"”) 


sef rs = server.createobject("ADODB.recordset") 

'query the database 

str="SELECT * FROM dictionary WHERE word = ” & 
request.querystrinø("formWord")&""" 

set RS = dbComn.execute(str) 

'1s this name taken or not 

1f not RS.eof then 


response.write "“TakenOrNot|<b>”&request.querystring("fommWord”) &”: 
</b><br>"&rs("meaning") 


else 

response.write “IakenOrNot[Thong bao: " & "Khong co tu nay” 
'end If 

end If 


%> 


Tương tự như vậy, các ứng dụng kiểm tra tên đăng nhập (người dùng 
chọn tên đăng nhập và check xem tên đó đã có chưa), tự động sao lưu văn 
bản đang soạn thảo (auto save), tự động sao lưu nội dung làm việc của 
người dùng (ví dụ điền form)... cũng được thực hiện thông qua cơ chế 
này. 


Chúc các bạn thành công 


Xây dựng Ứng dụng WAP với IIS và ASP 

WAP, viết tắt của Wireless Application Protocol (Giao thức ứng dụng 
không dây), kế thừa các chuẩn Internet (HTML, XML và TCP/TIP), cho 
phép các thiết bị cầm tay có thể kết nối tới Server truy xuất thông tin và 
các dịch vụ. Giao thức này được thiết kế cho các trình duyệt siêu nhỏ 
(micro browser) dùng ngôn ngữ đánh dấu WML (Wireless Markup 
Language). Công nghệ WAP đang là công nghệ chuẩn chủ đạo cho các 
ứng dụng trên các thiết bị không dây như điện thoại di động. Một số Ứng 
dụng WAP điển hình đang được áp dụng: đặt vé; kiểm tra email; xem dự 
báo thời tiết, tỈ giá, giá cổ phiếu; xem kết quả bóng đá; tra cứu danh bạ 
điện thoại... 


Xây dựng Ứng dụng WAP với IIS và ASP 
Đỗ Ngọc Minh 

Viện CNTT, ĐH Quốc Gia Hà Nội 

Email: minhdn(@)vnu.edu.vn 

1. Giới thiệu 


WAP là viết tắt của Wireless Application Protocol (Giao thức ứng dụng 
không dây), được kế thừa các chuẩn Internet (HTML, XML và TCP/IP), 
cho phép các thiết bị cầm tay có thể kết nối tới Server truy xuất thông tin 
và các dịch vụ. Giao thức này được thiết kế cho các trình duyệt siêu nhỏ 
(micro browser) nhờ sử dụng ngôn ngữ đánh dấu WML (Wireless Markup 
Language). WML được định nghĩa như là Ứng dụng XML 1.0 


Công nghệ Wap ra đời vào năm 1997 bởi Wap forum 
(www.wapforum.org), bao gồm Ericsson, Motorola, Nokia, và Unwired 
Planet. Công nghệ Wap đang là công nghệ chuẩn chủ đạo cho các Ứng 
dụng phục vụ trên các thiết bị không dây như các điện thoại di động kỹ 
thuật số. Phiên bản mới nhất gần đây là phiên bản Wap 2.0. 


Các nhà cung cấp dịnh vụ Internet hiện nay không những chú trọng phát 
triển, cập nhật thông tin cho Website của họ mà còn rất chú trọng tới các 


thông tin dành cho WAP. Với sự ra đời của ngày càng nhiều các loại điện 
thoại có khả năng hỗ trợ Wap cùng với sự phát triển của hệ thống thông 
tin di động, chắc chân Wap sẽ có một vai trò quan trọng trong xã hội hiện 
đại. 


Một số ứng dụng Wap điển hình đang được áp dụng: 


« Kiểm tra thông tin về chỗ trên tàu. 
se Đặt mua vé 

eỔ Kiểm tra chuyến bay 

e© Xem dự báo thời tiết 

e Xem giá cổ phiếu 

e Tra cứu danh bạ điện thoại 

se Check mail 

e Xem kết quả bóng đá... 


Các trình duyệt Wap siêu nhỏ (WAP Micro Browsers) 


Để vừa vặn hiển thị các trang thông tin lên các thiết bị không dây cỡ nhỏ, 
Wap sử dụng trình duyệt siêu nhỏ. 

Một trình duyệt siêu nhỏ thực chất là một phần mềm nhỏ tốn rất ít tài 
nguyên bộ nhớ cũng như các yêu cầu về phần cứng và CPU. Nó có thể 
hiển thị thông tin nhờ ngôn ngữ đánh dấu gọi là WML 


Trình duyệt siêu nhỏ cũng có khả năng thông dịch các phiên bản thu nhỏ 
của Java Script, gọi là WML Script. 


Một số các trình duyệt Wap thông dụng hiện nay nhƯ: Klondike, Deck-it, 
Gelon...Có thể download các phần mềm trình duyệt này về để thực thi 
và hiển thị các trang wml trên máy tính của bạn từ các địa chỉ sau: 
Deck-it: http:/www.Pyweb.com 


Klondike: htfp:/www.apachesoftware.com.... 


Gelon: http://www.gøelon.net 


WML là gì? 

WML là viết tắt của Wireless Markup Language. Nó là ngôn ngữ đánh 
dấu kể thừa từ HTML, tuy nhiên WML dựa trên XML, do đó nó chặt chẽ 
hơn HTML. 

WML được sử dụng để tạo ra các trang có khả năng hiển thị trên WAP 
browser. Các trang trên WML gọi là DECKS. Decks được thiết lập bởi 
tập hợp các CARDS. 

Ví dụ một trang WML : 

<?xml version="”1.0”?> 

<!DOCTYPE wml PUBLIC "-/WAPEFORUM//DTD WML 1.1/EN" 
"http://www.wapforum.org/ITD/wml_1.1.xml"> 

<wml> 

<card id="card1” tile="Minh hoa card 1”> 

<p> 

Chao ban da den voi wml 

</p> 

</card> 


</wml> 


Bạn có thể tham khảo thêm về cú pháp của WML tại địa chi 
wwW.w3schools.com/wap . 


Hiển 


Trang wml này sau khi save vào đĩa và hiển thị nhờ thị 
Klondike (Trình duyệt này cho phép mỞ trực tiẾp trang nhờ 
wml bình thường như mở 1 file ) Deck- 


It 


Một số so sánh minh họa sự khác biệt giữa HTML và WML 


HTML, WML, 

- Các trang có đuôi 

.htm hoặc .html- Hiển - Các trang có đuôi .wml- Hiển thị nhờ 
thị nhờ trình duyệt trình duyệt Wap (Wap 


Web (Web browser)IE, browser)Klondike, Deck-it, Gelon... 
Netscape, Opera ... 


Cú pháp không chặt Cú pháp rất chặt chẽ do sử dụng công 
chế nghệ XML 
Một trang html được 


gọi là 1 Web page Một trang wml được gọi là một card 


Sử dụng Java Script 
để chạy các ứng dụng 
đơn giản trên 
ClientMã Java Script 
có thể được trộn lẫn 
trong mã HTML, 


Sử dụng WML Script (chính là Java 
Script thu gọn)Mã WML Script phải 
năm ngoài trang WML. 


Cho phép hiển thị BỊ giới hạn bởi màn hình thiết bị 


thông tin cực kỳ đa (thường là rất bé), nếu có hiển thị ảnh 

dạng, phong phú (Các thì cũng phải sử dụng format riêng, ví 

hiệu ứng âm thanh dụ WBMP có kích thước và dung lượng 

hình ảnh...) file rất nhỏ, ngoài ra, đây là ảnh đen 
trắng. 


2. Cấu hình phần mềm máy chủ IIS (Internet Information Servies) cho 
phép thực thi chức năng của Wap Server 


Như ta đã biết, từ Windows 2000, IIS được tích hợp sẵn trong bộ cài và là 
một thành phần cài đặt tùy chọn (option). Các cấu hình mặc định trong 
IIS cho phép IIS là 1 server phục vụ các ứng dụng Web, tuy nhiên muốn 
IIS của ta có thêm khả năng phục vụ các ứng dụng Wap, cần thêm một 
số thông số như sau: 


1. Từ menu Start, chọn Setting - Control Panel ~ Administrative tools - 
Internet Services Manager. MỞ rộng dấu + ở tên máy và click chuột 
phải vào default web site 

. Lựa chọn properties. 

. Chọn Tab HTTP headers, ở mục MIME map, chọn file types 

. Click New Type. 

. Gõ wml vào ô Extension 

. Gõ text/vnd.wap.wml vào ö Content MIME. 

. Lặp lại các bước tỪ 4 đến 6 và gõ vào các thông số theo bảng sau 
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Bảng 1: MIME Types and File Extensions 
Type Eile Extension 


text/vnd.wap.wml .wml 


application/vnd.wap.wmilc .wmlc 


text/vnd.wap.wmlscript .wmls 
application/vnd.wap.wmilscriptc .wmlsc 
Image/vnd.wap.wbmp .wbmp 


Để xây dựng các ứng dụng WML cho phép tương tác với người sử dụng 
giống như công việc xây dựng trang Web động ta cũng lựa chọn công 
nghệ ASP (Active Server Pages) cho phép thực thi các Ứng dụng trên máy 
chủ trước khi trả lời Client. Nếu bạn đã từng sử dụng ASP cho các Ứng 
dụng Web thì bạn sẽ thấy một điều cơ bản là ASP sau khi thực thi trên 
máy chủ sẽ trả về cho Client mã HTML là mã mà trình duyệt có thể hiểu 
được. Như vậy, khi chuyển sang xây dựng ứng dụng trên WML, để hiển 
thị được trang trả về trên wap browser thì bạn chỉ cần chỉ định ASP trả 
về mã WML là xong. Các thao tác còn lại giống hệt như truy xuất Web 
động. 


Hiện tại WML của ta vẫn ở trạng thái tĩnh, ta cần phải thêm vào asp.dll 
để IIS có khả năng tạo ra văn bản wml. Để làm điều này, trong mục 
Properties của Default webserver, chọn tab Home Dỉectory, Click 
Configuration, bảng sau hiện ra: 


ta chọn add, sau đó điền các nội dung vào bảng Add/Edit Application 
Extension Mapping nhƯ sau: 


lz3 


Như vậy là ta đã cấu hình xong IIS, ngoài ra ở trên đầu mỗi trang asp, 
muốn hiển thị trên wap browser ta cần thêm đoạn lệnh sau: 


<% response.ContenfType = "text/vnd .wap.wmÏl” %> 

Sau khi cấu hình máy chủ, ta có thể tạo riêng 1 thư mục trên ổ C, ví dỤ: 
C:\WAP-applications, sau đó chép file wml ở trên đặt tên file là index.wml. 
Ngoài ra, ta gõ thêm file sau và đặt tên là index.asp 

<% response.ContenfType = "text/vnd.wap.wmÏl” %> 

<?xml version=”1.0”?> 

<wmil> 

<card id="card1” tile="Minh hoa asp”> 

<p> 

<%response.write("Chao ban”")%> 

</p> 

</card> 


</wml> 


Thiết đặt đường dẫn ảo (Virtual directory) tới thư mục này mang tên 
wap, sau đó khởi động trình duyệt Wap, gõ vào ô địa chỉ dòng chữ: 

hai trường hợp trên màn hình trình duyệt hiện ra nội dung Chao ban có 
nghĩa là máy chủ của ta đã sẵn sàng để chạy các ứng dụng tiếp theo. 


3. Minh họa ứng dụng hiển thị và cập nhật CSDL qua Wap Browser 


3.1. Chúng ta cùng nhau xây dựng một ứng dụng nhỏ cho phép hiển thị 
CSDL là 1 danh sách bao gồm tên và số điện thoại tương ứng của người 


đó. CSDL của ta được tạo trên Access, có tên là danhba.mdb, gồm 1 bảng 
danhsach và 2 trường ten (kiểu text) và dienthoai(kiểu số) như sau: 


Table: danhsach 
Ten Text 


Dienthoai Number 


Các file ta sẽ xây dựng tương ứng gồm: 

Display.asp cho phép hiển thị CSDL, 

Form.wml cho phép nhập dữ liệu 

Insert.asp cho phép cập nhật dữ liệu từ form vào CSDL, 
3.2. Mã nguồn từng file tương ứng: 

Display.asp 

<% Response.ContenfType = "text/vnd.wap.wml” %> 
<?xml version=”1.0” encoding=”iso-8859-1"”?> 


<!DOCTYPE wml PUBLIC "-/WAPEFORUM//DTD WML 1.1/EN" 
"http://www.wapforum.org/IDITD/wml_1.1.xml”> 


<wml> 
<1-- MAIN CARD--> 


<card id="Danhbadt"> 


<p align="left"><small><b>Danh ba D'T </b></small></p> 
<% 


strconn = "DRTVER=Microsoft Access Driver (*.mdb);DBQ=” & 
Server.MapPath("“danhba.mdb”) 


set conn = server.createobject(”ADODB.Connection”) 
Conn.open strconn 

sef rs = server.createobject(“adodb.recordset") 
Query = "Select * from danhsach” 

rs.open Query, conn 

1f not rs.eof Then rs.movefirsf 

Do While NOt Rs.EOEF 

%> 

<p align=”left"> 

<small> 

<h2><%=rs(“ten")%></h2> 
<%=rs(“dienthoai")%><br/> 

</small> 

</p> 

<% 

rs.movenext 


Loop 


else 

response.write(”<p align='left><small>D.sach chua co ai</small></p>") 
End If 

rs.close 

Set conv = nothing 

set rs= nothing 

set conn = nothing 

%> 

</card> 

</wml> 

Form.wml 

<?xml version="”1.0”?> 

<!IDOCˆTYPE wml PUBLIC "-/WAPFORUM/⁄/DTD WML 1.1/EN" 
"http://www.wapforum.org/IDITD/wmil_1.1.xml”> 

<wml> 

<card title=”Input”> 

<p> 

Ten: <input type=”text” name="”ten” size="15”/><br/> 

Dienthoai: <input type=”text” name=”dienthoal” size="15”/> 


</p> 


<do type=”accept” label=”"Send”> 

<øo href="insert.asp” method=”post”> 

<postfield name="ten” value="$ten"/> 

<postfield name="”coquan” value="$coquan"/> 
<postfield name="dienthoai" value=”§dienthoai"/> 
</go> 

</do> 

</card> 

</wml> 

Insert.asp 

<% 

Dim adoCon 

Dim rsAddnew 

Dim strSQL 

sef rs = server.createobject(“adodb.recordset") 

Set adoCon = Server.CreateObject("ADODB.Connecfion") 


adoCon.Open "DRTVER={Microsoft Access Driver (*.mdb)}; DBQ=" & 
Server.MapPath("“danhba.mdb”) 


Set rsAddnew = Server.CreateObject(“ADODB.Recordset”) 
strSQL = "SELECT * FROM danhsach;” 


rsAddnew.CursorType = 2 


rsAddnew.LockType = 3 

rsAddnew.Open strSQL, adoCon 

rsAddnew.AddNew 

rsA ddnew.Fields("ten”) = Requesft(“ten") 

rsAddnew.Eields(“dienthoai") = Request(“dienthoaï"”) 

rsAddnew.Update 

rsAddnew.Close 

Set rsAddnew = Nothing 

Set adoCon = Nothing 

Response.Redirect "“danhbadienthoai.asp” 

%> 

</p> 

</card> 

</wml> 

Ghi cả 3 tập tin trên vào thư mục bạn vừa tạo, khởi động Wap browser 
rồi gõ vào tỪ trình duyệt http://localhoswap/form.wml Sau khi bạn nhập 
tên và số điện thoại rồi submit, nếu màn hình hiển thị tên và số điện 
thoại bạn vừa nhập thì có nghĩa là bạn đã thành công. 


Tương tự như vậy, bạn có thể tham khảo thêm cú pháp các thẻ của 
WML cũng như WML Script để xây dựng cho mình các ứng dụng phong 
phú hơn. Riêng đối với ứng dụng CSDL bạn vừa làm, bạn có thể thêm 
chức năng Xóa, sửa và tìm kiếm để chương trình trên trở thành mỘt ứng 
dụng hoàn chỉnh. 


Chúc các bạn thành công 
Tài liệu tham khảo: 


1. http://www.w3schools.com/wap 


